import React, { useEffect, useState } from 'react';
import { dctloadDataAPI } from '../../../api/doctors';
import { Button, Card, Form, Input, Space, Table } from 'antd';
import {
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  SearchOutlined,
} from '@ant-design/icons';

const DoctorList: React.FC = () => {
  const [list, setlist] = useState([]);
  const [total, setTotal] = useState();
  const [query, setQuery] = useState({
    page: 1,
    pageSize: 10,
    name: '',
  });
  useEffect(() => {
    dctloadDataAPI(query).then((res) => {
      // console.log('res.data.list', res.data.list);
      setlist(res.data.list);
      setTotal(res.data.total);
    });
  }, [query]);
  return (
    <div className='wrap'>
      <Card
        title='知名医生'
        extra={
          <>
            <Button type='primary' icon={<PlusOutlined />}></Button>
          </>
        }
      >
        <Form
          layout='inline'
          onFinish={(v) => {
            console.log('v', v);
            setQuery({ ...query, name: v.name, page: 1 });
          }}
        >
          <Form.Item label='名字' name='name'>
            <Input placeholder='请输入关键词' />
          </Form.Item>
          <Form.Item>
            <Button
              type='primary'
              htmlType='submit'
              icon={<SearchOutlined />}
            ></Button>
          </Form.Item>
        </Form>

        <Table
          dataSource={list}
          rowKey={'id'}
          bordered
          columns={[
            {
              title: '序号',
              render(v: any, r: any, i: any) {
                return i + 1;
              },
              width: 80, //宽度
              align: 'center', //居中
            },
            {
              title: '名字',
              dataIndex: 'name',
              width: 80,
            },
            {
              title: '简介',
              dataIndex: 'desc',
              ellipsis: true,
              width: 80,
            },
            {
              title: '医院',
              render(v: any, r: any, i: any) {
                return v.hospitalInfo?.name;
              },
              width: 80,
              align: 'center',
            },
            {
              title: '科室',
              render(v: any, r: any, i: any) {
                return v.departmentInfo?.name;
              },
              width: 80,
              align: 'center',
            },
            {
              title: '职称',
              render(v: any, r: any, i: any) {
                return v.doctorTitleInfo.name;
              },
              width: 80,
              align: 'center',
            },
            {
              title: '操作',
              width: 120,
              render() {
                return (
                  <Space>
                    <Button type='primary' icon={<EditOutlined />}></Button>
                    <Button
                      type='primary'
                      danger
                      icon={<DeleteOutlined />}
                    ></Button>
                  </Space>
                );
              },
            },
          ]}
          pagination={{
            total,
            onChange(page, pageSize) {
              setQuery({
                ...query,
                page,
                pageSize,
              });
            },
          }}
        ></Table>
      </Card>
    </div>
  );
};

export default DoctorList;
